<template> 
<p style="font-size: 25px;font-weight: bold;margin-left: 700px;margin-top: 40px">订单管理</p>
<el-button @click="add" style="margin-top: 50px;">添加</el-button>
  <el-table :data="tableData" style="margin-top: 10px;"> 
    <el-table-column prop="name" label="服务名称" /> 
    <el-table-column prop="price" label="服务价格" /> 
    <el-table-column prop="appointment_time" label="预约时间" /> 
    <el-table-column prop="contact_person" label="联系人" /> 
    <el-table-column prop="customer_notes" label="客户备注" /> 
    <el-table-column prop="dispatch_time" label="派单时间" /> 
    <el-table-column label="服务图片"> 
      <template #default="scope"> 
        <img :src="scope.row.img"  alt="服务图片" style="max-width: 100px; max-height: 100px;" /> 
      </template> 
    </el-table-column> 
    <el-table-column prop="order_number" label="订单编号" /> 
    <el-table-column prop="price" label="价格" /> 
    <el-table-column prop="quantity" label="数量" /> 
    <el-table-column prop="service_address" label="服务地址" /> 
    <el-table-column  label="操作" >
        <template #default="scope">
          <el-button @click="del(scope.row.id)">删除</el-button>
          <el-button @click="editdata(scope.row)">编辑</el-button>
        </template>
    </el-table-column>
  </el-table> 

  <!-- 添加弹窗 -->
  <el-dialog v-model="flag" title="订单表" width="500">
    <el-form :model="form">
      <el-form-item label="服务名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="服务价格" :label-width="formLabelWidth">
        <el-input v-model="form.price" autocomplete="off" />
      </el-form-item>
      <el-form-item label="预约时间" :label-width="formLabelWidth">
          <el-date-picker v-model="form.appointment_time"  type="datetime" placeholder="选择日期时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="联系人" :label-width="formLabelWidth">
        <el-input v-model="form.contact_person" autocomplete="off" />
      </el-form-item>
      <el-form-item label="客户备注" :label-width="formLabelWidth">
        <el-input v-model="form.customer_notes" autocomplete="off" />
      </el-form-item>
      <el-form-item label="派单时间" :label-width="formLabelWidth">
          <el-date-picker v-model="form.dispatch_time"  type="datetime" placeholder="选择日期时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="订单编号" :label-width="formLabelWidth">
        <el-input v-model="form.order_number" autocomplete="off" />
      </el-form-item>
      <el-form-item label="数量" :label-width="formLabelWidth">
        <el-input v-model="form.quantity" autocomplete="off" />
      </el-form-item>
      <el-form-item label="服务地址" :label-width="formLabelWidth">
        <el-input v-model="form.service_address" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="getadd">
          添加
        </el-button>
      </div>
    </template>
  </el-dialog>
  


<!-- 编辑弹窗 -->
  <el-dialog v-model="set" title="编辑" width="500">
    <el-form :model="bianji">
      <el-form-item label="服务名称" :label-width="formLabelWidth">
        <el-input v-model="bianji.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="服务价格" :label-width="formLabelWidth">
        <el-input v-model="bianji.price" autocomplete="off" />
      </el-form-item>
      <el-form-item label="预约时间" :label-width="formLabelWidth">
          <el-date-picker v-model="bianji.appointment_time"  type="datetime" placeholder="选择日期时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="联系人" :label-width="formLabelWidth">
        <el-input v-model="bianji.contact_person" autocomplete="off" />
      </el-form-item>
      <el-form-item label="客户备注" :label-width="formLabelWidth">
        <el-input v-model="bianji.customer_notes" autocomplete="off" />
      </el-form-item>
      <el-form-item label="派单时间" :label-width="formLabelWidth">
          <el-date-picker v-model="bianji.dispatch_time"  type="datetime" placeholder="选择日期时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="订单编号" :label-width="formLabelWidth">
        <el-input v-model="bianji.order_number" autocomplete="off" />
      </el-form-item>
      <el-form-item label="数量" :label-width="formLabelWidth">
        <el-input v-model="bianji.quantity" autocomplete="off" />
      </el-form-item>
      <el-form-item label="服务地址" :label-width="formLabelWidth">
        <el-input v-model="bianji.service_address" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="exid">
          修改
        </el-button>
      </div>
    </template>
  </el-dialog>
</template> 


<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
let flag = ref(false);
let set = ref(false);
const editdata=(info)=>{
  set.value=true
  bianji.value=info
}
let bianji = ref({
  id:'',
  name: '', 
  price: '', 
  appointment_time: '', 
  contact_person: '', 
  customer_notes: '', 
  dispatch_time: '', 
  order_number: '', 
  quantity: '', 
  service_address: '' 
})
let form = ref({
  name: '', 
  price: '', 
  appointment_time: '', 
  contact_person: '', 
  customer_notes: '', 
  dispatch_time: '', 
  order_number: '', 
  quantity: '', 
  service_address: '' 
})
const exid=()=>{
  axios.put(`http://127.0.0.1:8000/user/order/${bianji.value.id}/`,bianji.value)
  .then(res=>{
    console.log(res)
    getlist()
  })
  .catch(err=>{
    console.log(err)
  })
}
const del=(id)=>{
  axios.delete(`http://127.0.0.1:8000/user/order/${id}`)
  .then(res=>{
    console.log(res)
    getlist()
  })
  .catch(err=>{
    console.log(err)
  })
}

const getadd = () => {
  axios.post("http://127.0.0.1:8000/user/order/", form.value)
    .then(res => {
      
      console.log(res)
      flag.value = false
      getlist()
    })
    .catch(err => {
      console.log(err)
    })
}
const tableData = ref([])
const getlist=()=>{
  axios.get("http://127.0.0.1:8000/user/order/")
  .then(res=>{
    console.log(res)
    tableData.value=res.data.results
  })
  .catch(err=>{
    console.log(err)
  })
}
onMounted(()=>{
  getlist()
})

//添加弹窗
const add = () => {
  flag.value = true;
}
</script>


<style scoped> 

</style>